<template>
  <el-dialog :title="dialogProps.title" :visible.sync="dialogProps.visible" width="460px"
    @open="handleDialogOpen()" v-loading="loading">
    <div slot="title" class="dialog-header">{{ dialogProps.title }}</div>
    <el-form :model="itemModel" :rules="formRules"
      ref="itemForm" label-width="35%" label-position="right" >
      <el-form-item style="font-size:30px;" label="检查项编码" prop="code">
        <el-col :span="16"><el-input ref="code" :maxlength="40" v-model="itemModel.code" autofocus></el-input></el-col>
      </el-form-item>
      <el-form-item style="font-size:30px;" label="检查项名称" prop="name">
        <el-col :span="16"><el-input ref="name" :maxlength="40" v-model="itemModel.name"></el-input></el-col>
      </el-form-item>

      <el-form-item style="font-size:30px;" label="助记名" prop="mnemonicName">
        <el-col :span="16"><el-input :maxlength="40" v-model="itemModel.mnemonicName"></el-input></el-col>
      </el-form-item>

     <el-form-item style="font-size:30px;" label="适用性别" prop="sex">
        <el-col :span="16">
          <el-select :maxlength="40" v-model="itemModel.sex">
            <el-option label="男" value="1"></el-option>
            <el-option label="女" value="2"></el-option>
            <el-option label="不限" value="0"></el-option>
          </el-select></el-col>
      </el-form-item>

      <el-form-item style="font-size:30px;" label="适用年龄" prop="age">
         <el-col :span="16"><el-input :maxlength="40" v-model="itemModel.age"></el-input></el-col>
      </el-form-item>


      <el-form-item style="font-size:30px;" label="价格" prop="price">
         <el-col :span="16"><el-input :maxlength="40" v-model="itemModel.price"></el-input></el-col>
      </el-form-item>


      <el-form-item style="font-size:30px;" label="项目说明">
        <el-col :span="16"><el-input :maxlength="40" type="textarea" v-model="itemModel.remark"></el-input></el-col>
      </el-form-item>

      <el-form-item style="font-size:30px;" label="注意事项">
        <el-col :span="16"><el-input :maxlength="40" type="textarea" v-model="itemModel.attention"></el-input></el-col>
      </el-form-item>

      <el-form-item style="font-size:30px;" label="所属分类" prop="affiliationClassify">
        <el-col :span="16"><el-input :maxlength="40" v-model="itemModel.affiliationClassify"></el-input></el-col>
      </el-form-item>

      <el-form-item style="font-size:30px;" label="参考最小范围" prop="minck">
        <el-col :span="16"><el-input :maxlength="40" v-model="itemModel.minck"></el-input></el-col>
      </el-form-item>

      <el-form-item style="font-size:30px;" label="参考最大范围" prop="maxck">
        <el-col :span="16"><el-input :maxlength="40" v-model="itemModel.maxck"></el-input></el-col>
      </el-form-item>

    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button size="small" @click="handleDialogClose()" v-if="dialogProps.action != 'read'">取 消</el-button>
      <el-button type="primary" size="small" @click="submitForm('itemForm')">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { saveTCheckItem, updateTCheckItem } from '@/api/xy/indicator'

export default {
  name: 'check-edit',
  data() {
    return {
      loading: false,
      itemModel: {
        id: 0,
        code: '',
        name: '',
        locked: false
      },
      dialogProps: {
        visible: false,
        action: '',
        title: ''
      },
      formRules: {
        code: [
          { required: true, message: '请输入检查项编码', trigger: 'blur' },
          { min: 2, max: 32, message: '长度在 2 到 32 个字符', trigger: 'blur' }
        ],
        name: [
          { required: true, message: '请输入检查项名称', trigger: 'blur' },
          { min: 1, max: 32, message: '长度在 3 到 32 个字符', trigger: 'blur' }
        ],
        sex: [
          { required:true ,message :'请输入适用性别', trigger:'blur' }
        ],
        price:[
          {required:true, message:'请输入检查项价格', trigger:'blur'}
        ]
      }
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          if(this.dialogProps.action === 'add') {
            this.dosaveTCheckItem()
          } else if(this.dialogProps.action === "edit"){
            this.doupdateTCheckItem()
          }else{
        this.dialogProps.visible = false
          }
        } else {
          return false
        }
      });
    },
    doupdateTCheckItem() {
      this.loading = true
      updateTCheckItem(this.itemModel.id, this.itemModel)
      .then(response => {
        this.loading = false
        this.dialogProps.visible = false
        this.$emit('save-finished')
      })
      .catch(error => {
        this.outputError(error)
      })
    },
    dosaveTCheckItem() {
      this.loading = true
      saveTCheckItem(this.itemModel)
      .then(response => {
        this.loading = false
        this.dialogProps.visible = false
        this.$emit('save-finished')
      })
      .catch(error => {
        this.outputError(error)
      })
    },
    handleDialogClose() {
      this.dialogProps.visible = false
    },
    handleDialogOpen() {
      this.$nextTick(() => {
        this.$refs['itemForm'].clearValidate()
        // this.$refs['code'].focus()
      })
    },
    outputError(error) {
      console.log(error.response ? error.response : error.message)
      this.loading = false
      this.$message({
        showClose: true,
        message: '出错了，请按F12查看浏览器日志。',
        type: 'error'
      })
    }
  },
  mounted: function() {
    this.$nextTick(() => {
      this.$on('openEditCheckDialog', function(item) {
        this.itemModel = item
        console.log(this.itemModel);
        this.dialogProps.action = 'edit'
        this.dialogProps.title = '修改指标'
        this.dialogProps.visible = true
      })
      this.$on('openAddCheckDialog', function() {
        this.dialogProps.action = 'add'
        this.dialogProps.title = '添加指标'
        this.itemModel = {
          locked: false
        }
        this.dialogProps.visible = true
      })
       this.$on('openReadCheckDialog', function(item) {
        this.itemModel = item
        this.dialogProps.action = 'read'
        this.dialogProps.title = '查看指标'
        this.dialogProps.visible = true
      })
    })
  }
}
</script>

